<template>
    <div class="level-list">
        <!-- 表格 -->
        <div class="table-list">
            <el-table
                ref="multipleTable"
                :data="tableData"
                stripe
                border
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelect"
            >
                <el-table-column
                    v-if="isSelect"
                    header-align="center"
                    align="center"
                    type="selection"
                    width="55"
                >
                </el-table-column>
                <el-table-column label="序号" width="50">
                    <template slot-scope="scope">
                        <span>{{
                            searchFrom.pageSize * (searchFrom.pageIndex - 1) +
                                1 +
                                scope.$index
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="一级指标" prop="indexOne">
                </el-table-column>
                <el-table-column prop="indexTwo" label="二级指标">
                </el-table-column>
                <el-table-column prop="indexThree" label="三级指标">
                </el-table-column>
                <el-table-column min-width="180" prop="name" label="质控点">
                </el-table-column>
                <el-table-column
                    width="120"
                    prop="intension"
                    label="质控点内涵"
                >
                </el-table-column>
                <el-table-column prop="diagnosisStandard" label="诊断标准">
                </el-table-column>
                <el-table-column
                    width="180"
                    label="归属部门"
                    prop="belongPartName"
                ></el-table-column>
                <el-table-column prop="valueType" label="值类型">
                </el-table-column>
                <el-table-column
                    v-if="showFiled.includes('standardValue')"
                    prop="standardValue"
                    label="标准值"
                >
                </el-table-column>
                <el-table-column
                    v-if="editAble || showFiled.includes('targetValue')"
                    prop="targetValue"
                    label="目标值"
                >
                    <!--<template slot-scope="scope">-->
                    <!--<el-input v-model="scope.row.targetValue"-->
                    <!--size="small"-->
                    <!--:autofocus="true"-->
                    <!--@change="handle('setTargetValue', scope.row)"-->
                    <!--placeholder="目标值"></el-input>-->
                    <!--</template>-->
                </el-table-column>
                <el-table-column
                    v-if="showFiled.includes('expectedValue')"
                    prop="expectedValue"
                    label="预期值"
                >
                </el-table-column>
                <el-table-column
                    v-if="showFiled.includes('isWarning')"
                    prop="isWarning "
                    label="是否预警"
                >
                    <template slot-scope="scope">
                        {{ scope.row.isWarning == 1 ? "是" : "否" }}
                    </template>
                </el-table-column>
                <!--                <el-table-column
                                        v-if="showFiled.includes('currentValue')"
                                        prop="currentValue"
                                        label="当前值">
                                </el-table-column>-->
                <!--                <el-table-column
                    v-if="showFiled.includes('handworkMaintainValue')"
                    prop="handworkMaintainValue"
                    label="手工维护值">
                </el-table-column>-->
                <el-table-column
                    v-if="showFiled.includes('autoUpdateValue')"
                    prop="autoUpdateValue"
                    label="业务系统数据"
                >
                </el-table-column>
                <el-table-column
                    v-if="showFiled.includes('personnelTrainingState')"
                    prop="personnelTrainingState"
                    label="填报系统数据"
                >
                </el-table-column>
                <el-table-column
                    v-if="showFiled.includes('correctValue')"
                    prop="correctValue"
                    label="校准值"
                >
                </el-table-column>
                <el-table-column
                    v-if="showFiled.includes('state')"
                    prop="state"
                    label="指标状态"
                >
                    <template slot-scope="scope">
                        <span
                            :class="`dot ${getClass(scope.row.state)}`"
                        ></span>
                    </template>
                </el-table-column>
                <el-table-column prop="isWarning" label="预警状态">
                    <template slot-scope="scope">
                        {{
                            scope.row.warningState && scope.row.isWarning == 1
                                ? "预警中"
                                : ""
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="showFiled.includes('warningCount')"
                    prop="warningCount"
                    label="预警次数"
                >
                </el-table-column>
                <!--<el-table-column-->
                <!--v-if="showFiled.includes('warningState')"-->
                <!--prop="warningState"-->
                <!--label="预警状态">-->
                <!--<template slot-scope="scope">-->
                <!--   <span v-if="scope.row.warningState === 2">关闭预警</span>-->
                <!--<span v-else-if="scope.row.warningState === 1">预警中</span>-->
                <!--<span v-else>未预警</span>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="150"
                    v-if="isDetail || isEdit || isDel || isSet || isUpdateVal"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            v-if="isDetail"
                            @click="handle('detail', scope.row)"
                            >详情</el-button
                        >
                        <el-button
                            type="text"
                            v-if="isEdit"
                            @click="handle('edit', scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            v-permission="{
                                type: levelType,
                                per: [146, 147, 149, 151, 153]
                            }"
                            type="text"
                            v-if="isSet && scope.row.isEdit"
                            @click="handle('set', scope.row)"
                            >设置目标值</el-button
                        >
                        <!--             <el-button type="text" v-if="isUpdateVal && scope.row.isEdit" @click="handle('updateVal', scope.row)">手工维护值</el-button>-->
                        <el-button
                            type="text"
                            v-if="isUpdateCorrectVal"
                            @click="handle('updateCorrectValue', scope.row)"
                            >更新校准值</el-button
                        >
                        <el-button
                            type="text"
                            v-if="scope.row.proveFilePath"
                            @click="sourceManage(scope.row)"
                            >材料管理</el-button
                        >
                        <el-button
                            type="text"
                            v-if="
                                scope.row.warningState === 1 &&
                                    scope.row.isEdit === 1
                            "
                            @click="closeWarning(scope.row.id)"
                            >关闭预警</el-button
                        >
                        <el-button
                            type="text"
                            v-if="isDel"
                            @click="handle('del', scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <div class="margin-t-10 padding-bottom-20 text-center">
                <el-pagination
                    @current-change="changePage"
                    :current-page.sync="searchFrom.pageIndex"
                    :page-size="searchFrom.pageSize"
                    layout="prev, pager, next, jumper"
                    prev-text="上一页"
                    next-text="下一页"
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog
            title="佐证材料管理"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            width="50%"
            label-position="left"
            @close="close('ruleForm')"
        >
            <div class="search">
                文件名称
                <el-input
                    style="width:240px;"
                    class="mx-10"
                    size="small"
                    clearable
                    v-model="searchVal"
                    placeholder="请输入文件名"
                ></el-input>
                <el-button
                    class="mx-10"
                    type="primary"
                    size="small"
                    @click="search"
                    >查询</el-button
                >
                <el-button type="primary" size="small" @click="del"
                    >批量删除</el-button
                >
            </div>
            <el-table
                ref="multipleTable"
                class="mt-30"
                :data="tableList"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column prop="fileName" label="文件名称">
                </el-table-column>
                <el-table-column
                    prop="materialType"
                    label="材料类型"
                    width="120"
                >
                </el-table-column>
                <el-table-column prop="uploadTime" label="上传时间" width="120">
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="180">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="download(scope.row)"
                            >下载</el-button
                        >
                        <el-button type="text" @click="delDia(scope.row)"
                            ><span class="c-error">删除</span></el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import {
    materialManagement,
    materialManagementDel,
    deleteBatch
} from '@/api/improve';
export default {
    name: 'levelList',
    props: {
        levelType: {
            type: String
        },
        tableData: {
            type: Array
        },
        total: {
            type: [Number, String],
            default: 0
        },
        // 是否可以多选
        isSelect: {
            type: Boolean,
            default: false
        },
        // 目标值是否可编辑
        editAble: {
            type: Boolean,
            default: false
        },
        // 是否显示表格上的提示语
        isAlert: {
            type: Boolean,
            default: true
        },
        // 是否可以查看详情
        isDetail: {
            type: Boolean,
            default: false
        },
        // 是否可以删除
        isDel: {
            type: Boolean,
            default: false
        },
        // 是否可以修改
        isEdit: {
            type: Boolean,
            default: false
        },
        // 是否可以设置目标值
        isSet: {
            type: Boolean,
            default: false
        },
        // 是否可以更新当前值
        isUpdateVal: {
            type: Boolean,
            default: false
        },
        isUpdateCorrectVal: {
            type: Boolean,
            default: false
        },
        // 是否多选
        isMultiple: {
            type: Boolean,
            default: true
        },
        showFiled: {
            type: Array,
            default () {
                return [];
            }
        }
    },
    data () {
        return {
            // 表格参数
            searchFrom: {
                pageSize: 10,
                pageIndex: 1
            },
            // 选中的质控点
            selectArr: [],
            dialogVisible: false,
            tableList: [],
            // 表格选中项
            multipleSelection: [],
            searchVal: null,
            // 点击对象id
            targetId: null
        };
    },
    mounted () {
        // console.log(this.showFiled)
    },
    methods: {
        // 单选
        handleSelect (val) {
            if (this.isMultiple) {
                this.selectArr = val.map(item => item.id);
            } else {
                if (val.length > 1) {
                    this.$refs.multipleTable.clearSelection();
                    this.$refs.multipleTable.toggleRowSelection(val.pop());
                } else {
                    const item = val.pop();
                    this.selectArr = item != undefined ? [item.id] : [];
                }
            }
            this.$emit('selectArr', this.selectArr);
        },
        // 切换页码
        changePage (val) {
            this.searchFrom.pageIndex = val;
            this.$emit('changePage', this.searchFrom);
        },
        // 切换class
        getClass (state) {
            switch (state) {
                case 0:
                    return 'red';
                case 1:
                    return 'green';
                case 2:
                    return 'blue';
            }
        },
        // 操作
        handle (type, row) {
            switch (type) {
                case 'detail':
                    this.$emit('handlePoint', type, row.id);
                    break;
                case 'edit':
                    this.$emit('handlePoint', type, row.id);
                    break;
                case 'del':
                    this.$emit('handlePoint', type, row.id);
                    break;
                case 'setTargetValue':
                    // 这个暂时不用
                    this.$emit('setTargetValue', type, row);
                    break;
                case 'set':
                    this.$emit('handlePoint', type, row);
                    break;
                case 'updateVal':
                    // 更新当前值
                    //  this.$emit('updateCurrentValue', type, row);
                    // 更新手工维护值
                    this.$emit('updateHandworkMaintainValue', type, row);
                    break;
                case 'updateCorrectValue':
                    // 更新校准值
                    this.$emit('updateCorrectValue', type, row);
                    break;
            }
        },
        // 关闭预警
        closeWarning (id) {
            this.$emit('closeWarning', id);
        },
        // 材料下载
        download (row) {
            window.open(
                this.baseURL +
                    `/v1/pc/api/file/fileDownload?fileName=${row.name}&filePath=${row.proveFilePath}`,
                '_self'
            );
        },
        close (formName) {},
        search () {
            this.getTableData();
        },
        // 批量删除
        del () {
            if (this.multipleSelection.length < 1) {
                return this.message('warning', '请至少选择一项文件进行删除!');
            }
            const ids = [];
            this.multipleSelection.map(item => {
                ids.push(item.id);
            });
            deleteBatch(ids).then(res => {
                this.message('success', '批量删除成功');
                this.getTableData();
            });
        },
        handleSelectionChange (val) {
            this.multipleSelection = val;
        },
        delDia (item) {
            console.log(item, 'item');
            materialManagementDel(item.id).then(res => {
                this.message('success', '删除成功');
                this.getTableData();
            });
        },
        sourceManage (item) {
            console.log(item, 'item');
            this.dialogVisible = true;
            this.targetId = item.id;
            this.getTableData();
        },
        getTableData () {
            materialManagement({
                fileName: this.searchVal,
                materialId: this.targetId,
                pageIndex: 1,
                pageSize: 10
            }).then(res => {
                this.tableList = res.dataList || [];
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.level-list {
    /deep/ .primary {
        cursor: pointer;
        color: $blue;
    }
    .dot {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 100%;
    }
    .dot.red {
        background: $red;
    }
    .dot.green {
        background: $green;
    }
    .dot.blue {
        background: $blue;
    }
}
</style>
